<template>
    <div class="container" :style="{paddingTop: banner_list.length <= 0 ? '100px': '' }">
        <!--轮播图 start-->
        <van-swipe :autoplay="3000" v-if="banner_list.length" :show-indicators="true" style="height: 260px">
          <van-swipe-item v-for="(image, index) in banner_list" :key="index" @click="handleSwiperClick(image.url)">
            <img :src="image.img" />
          </van-swipe-item>
        </van-swipe>
        <!--轮播图 end-->
        <!--公告/我的学习-->
        <div class="notice-learning" :style="{'margin-top': banner_list.length > 0 ? '0' : '83px'}">
            <!-- 公告提示 -->
            <div class="notice" v-if="noticeList.length>0">
                <van-notice-bar :scrollable="false" mode="link" color="#333" background="#fff" @click="goNoticeDetail">
                    <span slot="left-icon" class="margin-right10 iconfont icongonggao-index notice-left">
                    {{ $t('announce_title') }}
                    </span>
                    <van-swipe vertical class="notice-swipe" :autoplay="3000" :show-indicators="false"  @change="getNoticeId">
                        <van-swipe-item v-for="(item,i) in noticeList" :key="i">{{item.msgTitle}}</van-swipe-item>
                    </van-swipe>
                </van-notice-bar>
            </div>
            <!-- 学习中 -->
            <div class="learning" v-if="learningCount > 0">
                <div class="common-title">
                    <span class="font-size16 title">{{$t('index_title_5')}}</span>
                    <van-icon name="arrow" class="color999" @click="goLearnMore" />
                </div>
                <ul class="learn-btn content-box">
                    <template v-for="(v,i) in tabList">
                        <li :class="{'active': currentIndex === v.id}" class="color999" @click="changeTab(v.id)" :key="i" v-if="v.list.length > 0">
                            {{v.title}}
                        </li>
                    </template>
                </ul>
                <div v-for="(item, index) in tabList" :key="index" >
                    <ul class="content-box content-list" v-show="currentIndex === item.id">
                        <li v-for="(v,i) in item.list" :key="i" @click="goLearningDetail(item.type,v)">
                            <van-image width="100%" height="100" :src="appUrl+(item.id === 4?v.ksImg:v.itmIcon)" lazy-load/>
                            <div class="info">
                                <p class="word-clamp-2 font-size12">{{item.id === 4?v.ksTitle:v.itmTitle}}</p>
                                <div style="" class="margin-top10 progress-sty" v-if="item.id !== 4">
                                    <div class="progress_sty">
                                        <span :style="'width: ' + v.courseProgress + '%'"></span>
                                    </div>
                                    <!-- <van-progress style="width: 40%;margin-top: 2%" color="#075ebb" :show-pivot="false" stroke-width="4px" :percentage="v.courseProgress" /> -->
                                    <span class="font-size12 margin-left5 color999">{{v.courseProgress}}%</span>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="schedule-info" v-if="currentIndex!==4">
                <van-image width="30" height="30" style="object-fit: contain;" :src=" require('./images/xx.png')" />
                <div class="schedule">
                    <div>
                        <span class="num">{{ completedNum || 0 }}</span>
                        <p class="color999 font-size12">{{ $t('task_ok') }}</p>
                    </div>
                </div>
                <div class="schedule">
                    <div>
                        <span class="num">{{ inprogressNum || 0 }}</span>
                        <p class="color999 font-size12">{{ $t('doing') }}</p>
                    </div>
                </div>
                <div class="schedule">
                    <div>
                        <span class="num">{{ failNum || 0 }}</span>
                        <p class="color999 font-size12">{{ $t('cos_app_fail') }}</p>
                    </div>
                </div>
            </div>
            <!-- 岗位发展地图 -->
            <div class="map">
                <router-link tag="span" to="/gradeMapList"  v-if="mapRole.showPostMap" class="bg1">{{$t('growth_path')}}</router-link>
                <router-link tag="span" to="/keyPosition" v-if="mapRole.showRankMap" class="bg2">{{$t('learning_maps')}}</router-link>
                <span @click="goToPk()" class="pkBg">{{$t('home_pk')}}</span>
            </div>
            <!-- 游戏化APP 入口 -->
            <!-- <a href="/web-content/lo/p1.html" style="margin-bottom: 20px;">
                <img :src="require('./images/game-banner.jpg')" style="width: 100%;height: auto;">
            </a> -->
        </div>
        <!--功能入口-->
        <van-grid clickable :column-num="4" :icon-size="40" :border="false">
            <van-grid-item  :icon="icon.backlog" :text="$t('home_title_3')" :to="{path: `/todolist`}" />
            <van-grid-item  :icon="icon.registration" :text="$t('cos_catalog')" :to="{path: `/learn/myCourses/${this.encId}`}" />
            <van-grid-item  :icon="icon.examIcon" :text="$t('personal_my_data_exam')" :to="{path: `/learn/examination`}" />
            <van-grid-item  :icon="icon.calendar" :text="$t('home_title_4')" :to="{path: `/LearningCalendar`}" />
            <van-grid-item  :icon="icon.knowledge" :text="$t('find_knowledge_center')" :to="{path: `/learn/knowledge`}" />
            <van-grid-item  :icon="icon.buildingRing" :text="$t('home_title_6')" :to="{path: `/circle/home`}" />
            <van-grid-item  :icon="icon.questions" :text="$t('find_question_and_answer')" @click.native="toKnowList" />
            <van-grid-item  :icon="icon.live" :text="$t('find_live')" :to="{path: `/live`}" />
        </van-grid>
        <!--推荐课程-->
        <div class="course-box" v-if="courseList.length>0">
            <div class="common-title margin-bottom10">
                <span class="font-size16 title">{{$t('cos_recommend')}}</span>
                <router-link tag="span" to="/recommendCourse" class="color999 vc"><van-icon name="arrow" /></router-link>
            </div>
            <ul>
                <li v-for="(item,i) in courseList.slice(0,3)" :key="i" @click="courseDetail(item.itmId, item.itmType, item.itmTitle)">
                    <van-image width="50%" :height="recommendHeight" :src="appUrl+item.itmIcon" lazy-load/>
                    <div class="white-bg info">
                        <p class="word-clamp-2" style="color:#333;">{{item.itmTitle}}</p>
                        <span class="font-size12 color999 icon">
                            <span><i class="user-icon"></i>{{item.totalLearner}}</span>
                        </span>
                    </div>
                </li>
            </ul>
        </div>
        <!-- 热门回答 -->
        <div class="answer" v-if="answerList.length>0">
            <div class="common-title margin-bottom10 title-box">
                <span class="font-size16 title">{{$t('know_remen')}}</span>
                <span @click="toKnowList" class="color999 vc" ><van-icon name="arrow" /></span>
            </div>
            <ul class="white-bg">
                <li v-for="(item, i) in answerList" :key="i" @click="toAnswerDetail(item.queType,item.queId)">
                    <p class=" font-size16 word-clamp-2 margin-bottom15">{{item.queTitle}}</p>
                    <div class="info">
                        <div class="head">
                            <van-image width="25" round height="25" :src="appUrl+item.queUsrPhoto" lazy-load/>
                            <p class="color666" style="margin-left:4px">{{ item.queDisplayBil }}</p>
                        </div>
                        <p class="font-size12 user">
                            <span class="color999 margin-right10"><label>{{item.joinCount}}</label>{{$t('index_tip_1')}}</span>
                            <span class="color999">{{item.queCreateTimestamp}}</span>
                        </p>
                    </div>
                </li>
            </ul>
        </div>
        <!-- 资讯 -->
        <div class="information" v-if="InformationList.length>0">
            <div class="common-title margin-bottom10">
                <span class="font-size16 title">{{$t('find_information')}}</span>
                <router-link tag="span" to="/freshInformation" class="color999 vc"><van-icon name="arrow" /></router-link>
            </div>
            <ul>
                <li v-for="(item,i) in InformationList.slice(0,2)" :key="i" @click="toInformationDetail(item.artId,item.artTitle)">
                    <van-image width="110" height="73" :src="appUrl+item.artIconFile" lazy-load/>
                    <div class="white-bg info">
                        <p class="word-clamp-2 font-size12">{{item.artTitle}}</p>
                        <span class="font-size10 color999">{{item.artUpdateDatetime}}</span>
                    </div>
                </li>
            </ul>
        </div>
        <!-- 讲师风采 -->
        <div class="lecturer" v-if="lecturerList.length>0">
            <div class="common-title margin-bottom10">
                <span class="font-size16 title">{{$t("find_instructor_style")}}</span>
                <router-link tag="span" to="/instructorList" class="color999 vc"><van-icon name="arrow" /></router-link>
            </div>
            <ul>
                <li v-for="(item,i) in lecturerList.slice(0,4)" :key="i" @click="lecturerDetail(item.itiEntId,item.itiImg)">
                    <div class="head-box">
                        <van-image height="100%" width="100%" style="margin: auto;border-radius: 0;" round :src="appUrl+item.itiImg" lazy-load/>
                        <p>{{$t(`instructor_level_${item.itiLevel}`)}}</p>
                    </div>
                    <div class="name-info">
                        <p class="name">{{item.itiName}}</p>
                        <p class="info word-clamp-2">{{item.itiExpertiseAreas}}</p>
                    </div>
                </li>
            </ul>
        </div>
        <!--登录成功加积分tips-->
        <div class="firstLogin-tip" v-if="isFirstLogin">
            <div class="firstLogin-tip-body">
                <div class="firstLogin-tip-content">
                    <i></i>
                    <div style="font-size: 18px;">{{ $t("landed_successfully") }}+{{loginCredit}}{{ $t("credits_point_num_2") }}</div><!--登陆成功/积分-->
                    <div style="color: #666666;margin-top: 20px;">{{ $t("current_total_points") }} {{firstLoginInfo}}</div><!--当前总积分-->
                </div>
                <div class="firstLogin-tip-btn">
                    <div @click="jumPoints">{{ $t("view_credit_details") }}</div><!--查看积分详情-->
                    <div @click="closeFirstLogin">{{ $t("button_close") }}</div><!--关闭-->
                </div>
            </div>
        </div>
        <!--升级新版本tips-->
        <div class="new-version-box" v-if="isNewVersion">
            <div class="new-version-body">
                <div class="clearfix new-version-bg">
                    <p class="word-title-11">{{ $t("upgrade_new_version") }}</p><br><!--升级新版本-->
                    <p class="word-title-12">V4.0.0</p>
                </div>
                <div class="new-version-content">
                    <p class="font-size14 content-title">{{ $t("new_version_update") }}</p><!--新版本更新内容-->
                    <p class="color666">1.{{$t('update_tip1')}}</p>
                    <p class="color666">2.{{$t('update_tip2')}}</p>
                    <p class="color666">3.{{$t('update_tip3')}}</p>
                    <p class="color666">4.{{$t('update_tip4')}}</p>
                </div>
                <div class="new-version-btn clearfix">
                    <div>{{ $t("update_immediately") }}</div><!--立即更新-->
                    <div @click="isNewVersion = false">{{ $t("cancel") }}</div><!--取消-->
                </div>
            </div>
        </div>
        <common-loading :isLoading="isLoading"></common-loading>
        <div v-if="isShowUserTaskBtn" class="user-task" @click="toUserTaskList">
            <img src="../../../static/images/userTask.png" width="100%" height="100%">
        </div>
        <van-dialog v-model="faceShow" :show-confirm-button='false'>
            <div slot="title" style="position: relative;">
                {{$t("facial_information_collection")}}
                <van-icon name="cross" size="20" style="position: absolute; right: 10px;top: -15px" @click="faceShow = false"/>
            </div>
            <div style="text-align: center;">
               <p style="padding:25px;line-height:2;text-align: left;font-size:14px;color:#424542">{{$t('face_tips1')}}</p>
                <van-button round type="default" size="normal" class="back-btn" @click="sureToFace">{{$t('go_photo')}}</van-button>
            </div>
        </van-dialog>
    </div>
</template>

<script>
import mixin from '@/components/mixin/Mixin';
import HeadImg from '../personal/HeadImg';
import { NoticeBar, Swipe, SwipeItem, Icon, Image, Progress, Toast, Grid, GridItem } from 'vant';
import examIcon from './images/kh.png';
import calendar from './images/rc.png';
import registration from './images/xkzx.png';
import rank from '../../../static/images/home/rank.png';
import backlog from './images/db.png';
import buildingRing from './images/gzq.png';
import questions from './images/zxwd.png';
import knowledge from './images/zszx.png';
import live from './images/zb.png';
import faceInfoCollection from '@/utils/faceInfo';
export default {
    name: 'homeIndex',
    components: {
        HeadImg,
        vanGrid: Grid,
        vanGridItem: GridItem,
        [NoticeBar.name]: NoticeBar,
        [Swipe.name]: Swipe,
        [SwipeItem.name]: SwipeItem,
        [Icon.name]: Icon,
        [Image.name]: Image,
        [Progress.name]: Progress,
        [Toast.name]: Toast
    },
    mixins: [mixin],
    data() {
        return {
            faceShow: false,
            clientWidth: 375, // 屏幕宽度，初始375
            swiperHeight: '260px', // swiper高度，初始180
            locale: {
                'en': 'en-US',
                'cn': 'zh-CN',
                'hk': 'zh-TW'
            },
            token: window.localStorage.getItem('token'),
            icon: {
                examIcon,
                calendar,
                registration,
                rank,
                backlog,
                buildingRing,
                knowledge,
                live,
                questions
            },
            allCount: '',
            completedNum: 0,
            failNum: 0,
            inprogressNum: 0,
            encId: '', //获取用户id
            userId: '',
            animate: false,
            banner_list: [], //banner图
            banner_index: 0,
            announceTitles: [], //公告
            firstLoginInfo: '',
            loginCredit: '',
            isFirstLogin: false,
            isNewVersion: false, //新版本提示
            isLoading: true,
            userEntId: null, //用户entId
            isShowUserTaskBtn: false,
            answerList: [], // 热门问答
            lecturerList: [], // 讲师风采
            courseList: [], // 热门课程
            noticeList: [], // 公告
            currentNotice: null, // 当前公告id
            mapRole: {}, // 地图显示隐藏权限
            learningCount: 0, // 学习中的数量
            currentIndex: 1, // 当前选项---学习中
            InformationList: [], // 资讯列表
            trainLearnList: [],
            integratedList: [],
            topicLearnList: [],
            examLearnList: [],
            courseLearnList: []
        };
    },
    methods: {
        // 人脸采集
        async sureToFace() {
            let _this = this;
            let data = await faceInfoCollection(_this);
            if (data.urlBase) {
                this.$router.push({path: '/faceInfo', query: {srcBase64: data.urlBase, srcPath: data.pathSrc}});
            }
        },
        init() {
            //获取用户id
            this.path = this.$route.path;
            this.$axios({
                method: 'GET',
                url: '/app/api/user/current'
            }).then(res => {
                this.userEntId = res.data.usrEntId;
                this.encId = this.wbEncryptor(this.userEntId);
                /*存储userInfo*/
                window.localStorage.setItem('userInfo', JSON.stringify(res.data));
                window.localStorage.setItem('usrSteUsrId', res.data.usrSteUsrId);
                if (!window.localStorage.getItem('waterMarkSwitch')) {
                    this.$store.dispatch('handleWaterMark');
                }
                /*首次登陆*/
                if (this.$store.state.config.isFirstLogin) {
                    if (res.data && res.data.regUser) {
                        this.$axios({
                            method: 'GET',
                            url: `/app/personal/home/json/${res.data.regUser.usr_ent_id}`
                        }).then(res => {
                            this.firstLoginInfo = res.data.total_credits;
                            this.loginCredit = this.$store.state.config.loginCredit;
                            this.isFirstLogin = true;
                        });
                    }
                }
            });
            //新banner接口
            this.$axios({
                method: 'GET',
                url: `/app/api/sys-set/pc-style/index/1`
            }).then((res) => {
                if (res.data && res.data.length > 0) {
                    var list = [];
                    for (var i = 0; i < res.data.length && i < 4; i++) {
                        if (res.data[i].status !== 'OFF') {
                            list.push({img: this.appUrl + res.data[i].imgPath, url: res.data[i].url});
                        }
                    }
                    this.banner_list = list;
                    console.log(this.banner_list, 'banner_list');
                }
                this.isLoading = false;
            });
            // 公告
            this.getNotice();
            // 学习中
            this.getLearning();
            // 获取我的学习中完成状态数量
            this.getNum();
            // 职级地图
            this.rankMap();
            // 资讯
            this.getInformation();
            // 热门课程
            this.hotCourse();
            // 热门问答
            this.getHotAnwser();
            // 讲师风采
            this.getLecturer();
        },
        getNum() {
            this.$axios({
                method: 'GET',
                url: `/app/api/trainee/my/learning/situation`
            }).then(res => {
                this.allCount = res.data;
                this.completedNum = this.allCount.lsCourseCompletedNum;
                this.failNum = this.allCount.lsCourseFailNum;
                this.inprogressNum = this.allCount.lsCourseInprogressNum;
            });
        },
        // 登陆积分按钮关闭
        closeFirstLogin() {
            this.isFirstLogin = false;
            this.$store.commit('setIsFirstLogin', false);
        },
        // 查看积分详情
        jumPoints() {
            this.$router.push({path: `/totalPoints/${this.encId}`});
            this.$store.commit('setIsFirstLogin', false);
        },
        handleSwiperClick(event) {
            var webview = null;
            var url = event ? new URL(event) : '';
            if (process.env.NODE_ENV === 'production_app') {
                if (url.origin === this.appUrl) {
                    this.$router.push(url.hash.substr(1));
                } else {
                    webview = window.plus.webview.create(event, 'test', {
                        titleNView: {
                            backgroundColor: '#ffffff',
                            titleText: '',
                            titleColor: '#333333',
                            autoBackButton: true
                        },
                        backButtonAutoControl: 'close'
                    });
                    webview.addEventListener('close', function() { // 返回按钮被点击
                        webview.close();
                    });
                    webview.addEventListener('titleUpdate', function() {
                        webview.show();
                    });
                }
            } else {
                window.open(event);
            }
        },
        showMarquee() {
            this.animate = !this.animate;
            var that = this; //在异步函数中会出现this的偏移问题，此处一定要先保存好this的指向
            setTimeout(function() {
                that.announceTitles.push(that.announceTitles[0]);
                that.announceTitles.shift();
                that.animate = !that.animate; //这个地方如果不把animate 取反会出现消息回滚的现象，此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了
            }, 3000);
        },
        toUserTaskList() {
            this.$router.push({path: `/home/userTask/${this.userEntId}`});
        },
        showUserTaskBtn() {
            this.$axios.get(`/app/integral/task/open/rule`).then(res => {
                if (res && res.data) {
                    this.isShowUserTaskBtn = res.data;
                }
            });
        },
        /**
         * 公告
         * */
        getNotice() {
            this.$axios({
                method: 'GET',
                url: '/app/api/trainee/home/homeMessage/list',
                params: {
                    pageNo: 1,
                    pageSize: 5
                }
            }).then(res => {
                if (res.data.results && res.data.results.length > 0) {
                    this.noticeList = res.data.results;
                    this.currentNotice = res.data.results[0].msgId;
                }
            });
        },
        /**
         * 进入公告详情页
         * */
        goNoticeDetail() {
            this.$router.push({path: `/announceDetail/${this.currentNotice}`});
        },
        /**
         * 获取当前公告ID
         * */
        getNoticeId(index) {
            this.currentNotice = this.noticeList[index].msgId;
        },
        /**
         * 职级地图
         * */
        rankMap() {
            this.$axios({
                method: 'GET',
                url: '/app/api/trainee/home/quickEntry',
                params: {
                    isMobile: true
                }
            }).then(res => {
                if (res.data) {
                    this.mapRole = res.data;
                }
            });
        },
        /**
         * 学习中
         * */
        getLearning() {
            this.$axios({
                method: 'GET',
                url: '/app/api/trainee/home/learningCourse/List',
                params: {
                    pageNo: 1,
                    pageSize: 5,
                    isMobile: true
                }
            }).then(res => {
                if (res.data) {
                    this.learningCount = res.data.learningCount;
                    this.courseLearnList = res.data.selfstudyList; // 网上课程
                    this.trainLearnList = res.data.trianList; // 培训
                    this.examLearnList = res.data.examList; // 考试
                    this.topicLearnList = res.data.knowledgeList; // 专题培训
                    // 获取含有数据的分类
                    const arr = this.tabList.filter(item => {
                        return item.list.length > 0;
                    });
                    if (arr && arr.length > 0) {
                        this.currentIndex = arr[0].id;
                    }
                }
            });
        },
        /**
         * 学习中的更多
         * */
        goLearnMore() {
            switch (this.currentIndex) {
            case 1:
                this.$router.push({path: `/myLearn/myCourses`}); // 课程
                break;
            case 2:
                this.$router.push({path: `/myLearn/myCertifiedCourses`}); // 培训
                break;
            case 3:
                this.$router.push({path: '/myLearn/myExam'}); // 考试
                break;
            case 4:
                this.$router.push({path: `/knowledge/special`}); // 专题
                break;
            }
        },
        /**
         * 学习中详情页
         * */
        goLearningDetail(type, item) {
            switch (type) {
            case 'course':
                if (item.itmType === 'SELFSTUDY') {
                    this.$router.push({path: `/course/${item.itmId}/0`});
                }
                if (item.itmType === 'MAP') { // 游戏
                    this.$router.push({path: '/studyMapDetail', query: {itmId: item.itmId, title: item.itmTitle}});
                }
                if (item.itmType === 'AUDIOVIDEO') { // 公开课
                    this.$router.push({path: `/publicClass/openDetail/${item.itmId}`, query: {itmId: item.itmId, title: item.itmTitle}});
                }
                break;
            case 'train':
                this.$router.push({path: `/certifiedCourse/${item.itmId}/0`});
                break;
            case 'exam':
                this.$router.push({path: `/course/${item.itmId}/0`});
                break;
            case 'topic':
                this.$router.push({path: '/knowledgeDetail', query: {id: item.ksId, title: item.ksTitle}});
                break;
            }
        },
        /**
         * 资讯
         * */
        getInformation() {
            this.$axios({
                method: 'GET',
                url: '/app/api/trainee/home/homeArticle/List',
                params: {
                    pageNo: 1,
                    pageSize: 5,
                    isMobile: true
                }
            }).then(res => {
                if (res.data.results && res.data.results.length > 0) {
                    this.InformationList = res.data.results;
                }
            });
        },
        /**
         * 资讯进入详情页
         * */
        toInformationDetail(id, title) {
            this.$router.push({path: '/freshInformationDetail', query: {id, title}});
        },
        /**
         * 改变学习中的tab
         * */
        changeTab(index) {
            this.currentIndex = index;
            switch (index) {
            case 1:
                this.completedNum = this.allCount.lsCourseCompletedNum;
                this.failNum = this.allCount.lsCourseFailNum;
                this.inprogressNum = this.allCount.lsCourseInprogressNum;
                break;
            case 2:
                this.completedNum = this.allCount.lsTrainingCompletedNum;
                this.failNum = this.allCount.lsTrainingFailNum;
                this.inprogressNum = this.allCount.lsTrainingInprogressNum;
                break;
            case 3:
                this.completedNum = this.allCount.lsExamCompletedNum;
                this.failNum = this.allCount.lsExamFailNum;
                this.inprogressNum = this.allCount.lsExamInprogressNum;
                break;
            }
        },
        /**
         * 热门课程
         * */
        hotCourse() {
            this.$axios({
                method: 'POST',
                url: '/app/api/trainee/course/recommend/list?pageNo=1&pageSize=2',
                data: {
                    appStatus: '',
                    isCompulsory: '',
                    isExam: false,
                    isMobileInd: true,
                    itemType: '',
                    recommendType: '',
                    isPopularInd: true
                }
            }).then(res => {
                if (res.data.results && res.data.results.length !== 0) {
                    this.courseList = res.data.results;
                }
            });
        },
        // 课程跳转
        courseDetail(id, type, title) {
            if (type && type === 'AUDIOVIDEO') { //跳转到公开课
                this.$router.push({path: `/publicClass/openDetail/${id}`});
            } else if (type === 'MAP') {
                this.$router.push({path: '/studyMapDetail', query: {itmId: id, title: title}});
            } else if (type === 'CLASSROOM') {
                this.$router.push({path: `/certifiedCourse/${id}/0`});
            } else {
                this.$router.push({path: `/course/${id}/0`});
            }
        },
        /**
         * 工作圈详情页
         * */
        toCircleDetail(id) {
            this.$router.push({path: '/circle/detail', query: {circleId: id}});
        },
        /**
         * 获取热门问答
         * */
        getHotAnwser() {
            this.$axios({
                method: 'GET',
                url: `/app/api/trainee/home/popularQa/list`,
                params: {
                    isMobile: true,
                    pageNo: 1,
                    pageSize: 2,
                    sortname: '',
                    sortorder: ''
                }
            }).then(res => {
                if (res.data.results && res.data.results.length > 0) {
                    this.answerList = res.data.results;
                }
            });
        },
        /**
         * 进入热门问答详情页
         * */
        toAnswerDetail(type, id) {
            window.localStorage.setItem('formUrl', '1');
            this.$router.push({path: `/knowDetail/${type}/${id}`});
        },
        /**
         * 讲师风采
         * */
        getLecturer() {
            this.$axios({
                method: 'GET',
                url: `/app/api/trainee/home/lecturerStyle/list`,
                params: {
                    pageNo: 1,
                    pageSize: 4,
                    sortname: '',
                    sortorder: ''
                }
            }).then(res => {
                if (res.data.results && res.data.results.length > 0) {
                    this.lecturerList = res.data.results;
                }
            });
        },
        /**
         * 进入讲师详情页
         * */
        lecturerDetail(id, imag) {
            this.$router.push({path: '/instructorDetail', query: {id, imag}});
        },
        /**
         * @description: 跳转到PK页
         * @param {*}
         * @return {*}
         */
        goToPk() {
            if (process.env.NODE_ENV === 'production_app') {
                if (window.plus) {
                    var ws = window.plus.webview.currentWebview();
                    var embed = window.plus.webview.create(this.appUrl + `/app/pk-trainee/index.html?token=${this.token}#/pk/square?lang=${this.locale[this.$i18n.locale]}`);
                    ws.append(embed);
                } else {
                    document.addEventListener('plusready', function() {
                        this.isAPP = true;
                        var ws = window.plus.webview.currentWebview();
                        var embed = window.plus.webview.create(this.appUrl + `/app/pk-trainee/index.html?token=${this.token}#/pk/square?lang=${this.locale[this.$i18n.locale]}`);
                        ws.append(embed);
                    }, false);
                }
            } else {
                this.$router.push('/pk-index');
            }
        },
        toKnowList() {
            window.localStorage.setItem('formUrl', '1');
            this.$router.push(`/know/knowList`);
        }
    },
    mounted() {
        this.clientWidth = document.body.clientWidth;
        this.swiperHeight = (this.clientWidth / (1080 / 750)) + 'px';
        this.$store.commit('addKeepAliveList', 'homeIndex');
        this.init();
    },
    activated() {
        this.init();
    },
    created() {
        setInterval(this.showMarquee, 3000); //在钩子函数中调用我在method 里面写的scroll()方法，注意此处不要忘记加this,我在这个位置掉了好几次坑，都是因为忘记写this。
        this.showUserTaskBtn();
    },
    computed: {
        /**
         * 学习中的tab
         * */
        tabList() {
            return [
                {id: 1, title: this.$t('menu_course'), list: this.courseLearnList, type: 'course'},
                {id: 2, title: this.$t('certified_courses'), list: this.trainLearnList, type: 'train'},
                {id: 3, title: this.$t('personal_my_data_exam'), list: this.examLearnList, type: 'exam'},
                {id: 4, title: this.$t('labe_topic'), list: this.topicLearnList, type: 'topic'}
            ];
        },
        /**
         * 图示自适应高度（推荐课程）
         * */
        recommendHeight() {
            const width = document.body.clientWidth - 30;
            let height = (width / 2) / 1.64;
            return height;
        }
    }
};
</script>

<style scoped lang="less">
@grid-item-content-padding: 10px 8px;
@box-pading:0 15px;
@border-radius3:3px;
.banner-swiper{
  margin-bottom: 0;
}
/deep/.index-entrance .weui-grid__icon{
    text-align: center;
    color: #fff;
    .icon{
        font-size: 20px;
        line-height: 35px;
    }
}
.iconi{
  font-size: 12px !important;
}
//垂直居中
.vc{
    display: flex;
    align-items: center;
}
.index-btn{
  border-radius: 5px;
  margin: 0 15px;
  margin-top: 15px;
  background: #fff;
  overflow: hidden;

}
// 公共标题
.common-title{
    display: flex;
    justify-content: space-between;
    line-height: 16px;
    .title{
        font-weight: 500;
        display: flex;
    }
    .title::before{
        content: '';
        height: 16px;
        line-height: 18px;
        display: inline-block;
        width: 5px;
        background: #075ebb;
        margin-right: 5px;
        border-radius: 8px;
    }
}
// 公共滑动盒子
.content-box{
    display: -webkit-box;
    overflow-x: scroll;
    -webkit-overflow-scrolling:touch;
    &::-webkit-scrollbar { /**chrome、safari */
        display: none;
    }
    scrollbar-width: none; /**火狐 */
    -ms-overflow-style: none; /**IE10+ */
}
.container{
    box-sizing: border-box;
    padding-bottom:70px;
}
.notice-learning{
    background-color:white;
    border-radius: 25px 25px 0px 0px;
    padding:5px 15px 0;
    position: relative;
    top: -25px;
}
// 学习中
.learning{
    margin-top:15px;
    .learn-btn{
        margin: 15px 0;
        li{
            padding: 5px 4%;
            border-radius: 5px;
            font-size: 12px;
            margin-right: 3%;
            background: #E5F1FD;
            border-radius: 20px;
            color: #2973F7;
            &:last-child{
                margin-right: 0;
            }
        }
        .active{
            color: #fff;
            background: #075ebb;
            border-radius: 20px;
        }
    }
    .content-list{
        padding-bottom: 10px;
        background: white;
        li{
            width: 48%;
            margin-right: 10px;
            background: #fff;
            border: 1px solid #F4F5F9;
            box-shadow: 0px 0px 10px 0px #E9E9E9;
            border-radius: 8px;
            /deep/.van-image__img{
                border-top-left-radius:@border-radius3;
                border-top-right-radius:@border-radius3;
            }
            .info{
                height: 55px;
                margin:6px 6px 10px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
            .progress-sty{
                display:flex;
                align-items:center;
            }
            }
        }
    }
}
.schedule-info{
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:#F1F8FF;padding:8px 15px;
    margin-top:10px;
    border-radius: 8px;
    .schedule{
        text-align: center;
        display: flex;
        align-items: center;
        width: 20%;
        justify-content: space-between;
        .num{
           font-style: italic;
           color: #333333;
           font-size:16px;
        }
    }
    .schedule::before{
        content: "";
        height: 30px;
        background: linear-gradient(to bottom, #EBF1F7, #E9EFF4, #EBF1F7);
        width: 1px;
    }
}
//地图
.map{
    margin-top: 25px;
    display: flex;
    // justify-content: space-between;
    padding-bottom: 20px;
    span:last-child{
        margin-right: 0;
    }
    span{
        width: 32%;
        display: inline-block;
        box-sizing: border-box;
        margin-right: 2%;
        height: 52px;
        color: #333;
        font-size: 14px;
        line-height: 52px;
        padding: 0 8px;
        border-radius: 5px;
        &:last-child{
            margin-right: 0;
        }
    }
    .bg1{
        color: #333;
        background: url('./images/cz.png') no-repeat;
        background-size: 100% 100%;
    }
    .bg2{
        color: #333;
        background: url('./images/xxdt.png') no-repeat;
        background-size: 100% 100%;
    }
    .pkBg{
        color: #333;
        background: url('./images/pk.png') no-repeat;
        background-size: 100% 100%;
    }

}
//资讯
.information{
    padding: @box-pading;
    margin-top: 10px;
    background: white;
    padding: 20px 15px;
    > ul{
        li:last-child{
            margin-bottom: 0;
            padding-bottom: 0;
            border:none;
        }
        li{
            display: flex;
            margin-bottom: 10px;
            padding-bottom: 10px;
            border-bottom: 1px dashed #e9e9e9;
            /deep/.van-image__img{
                border-radius: 8px;
            }
            /deep/.van-image__error{
                border-radius: 8px;
            }
            .info{
                flex:1;
                padding: 6px 8px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                border-top-right-radius:@border-radius3;
                border-bottom-right-radius:@border-radius3;
            }
        }
    }
}
//热门课程
.course-box{
    background: white;
    padding: 20px 15px;
    margin-top: 10px;
    ul{
        li{
            display: flex;
            margin-bottom: 10px;
            padding-bottom: 10px;
            border-bottom: 1px dashed #E9E9E9;
            /deep/.van-image__img{
                border-radius: 8px;
            }
            /deep/.van-image__error{
                border-radius: 8px;
            }
            .info{
                flex: 1;
                padding: 8px 12px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                .icon{
                    display: flex;
                    justify-content: space-between;
                }
            }
        }
        li:last-child{
            padding-bottom: 0;
            border: none;
            margin-bottom: 0;
        }
    }
}
//热门工作圈
.circle{
    padding: @box-pading;
    margin-top: 20px;
    ul{
        display: flex;
        justify-content: space-between;
        li{
            color:#fff;
            width: 48%;
            margin-right: 3%;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            border-radius: 5px;
            .mask{
                width: 100%;
                height: 100%;
                background: rgba(34,24,21,.2);
                border-radius: 5px;
                .info{
                    padding:40% 10px 10px;
                }
            }
            &:last-child{
                margin-right: 0;
            }
        }
    }
}
// 热门回答
.answer{
    background: white;
    padding: 20px 0;
    margin-top: 10px;
    .title-box{
        padding: @box-pading;
    }
    ul{
        padding: @box-pading;
        li:last-child{
            margin-bottom: 0;
        }
        li{
            // display: flex;
            padding: 15px 10px;
            background: #F1F8FF;
            margin-bottom: 10px;
            .head{
                display: flex;
                align-items: center;
                margin-right: 5%;
            }
            .info{
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
            }
            &:last-child{
                border-bottom:none
            }
            .user{
                display: flex;
                height: 25px;
                line-height: 25px;
                justify-content: space-between;
                label{
                    color: #075ebb;
                    margin-right: 5px;
                }
            }
        }
    }
}
// 讲师风采
.lecturer{
    margin-top: 10px;
    background: white;
    padding: 20px 15px;
    ul{
        display: grid;
        grid-template-columns: 48% 48%;
        justify-content: space-between;
        li{
            background-color: #fff;
            padding: 10px 0 10px;
            border-radius: 3px;
            .head-box{
                width: 100%;
                margin: 0 auto;
                // background-image: url('./images/jsbg.png');
                &::before {
                    content: '';
                    display: block;
                    width: 100%;
                    padding-bottom: 80%;
                }
                p{
                    position: absolute;
                    left: 0;
                    top: -10px;
                    width: 68px;
                    height: 24px;
                    line-height: 24px;
                    background: linear-gradient(90deg, #F2DBB5 0%, #E2BB7F 99%);
                    border-radius: 4px;
                    font-size: 12px;
                    color: #9E651C;
                    text-align: center;
                }
                position: relative;
                /deep/.van-image{
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    margin: 0;
                    overflow: auto;
                }
            }
            &:last-child{
                margin-right: 0;
            }
            .name-info{
                border:1px solid #e9e9e9;
                padding-bottom:5px;
                height:70px
            }
            .name{
                color: #333;
                margin-top: 8px;
                text-align: center;
            }
            .rank{
                color: #075ebb;
                font-size: 12px;
                margin: 6px 0;
            }
            .info{
                color:#999999;
                font-size: 12px;
                margin: 5px 0 0 8px
            }
        }
    }
}
.van-grid{
    padding: 20px 0;
    background: white;
    margin-top:-15px
}
.notice{
    box-sizing: border-box;
    margin-top:15px;
    box-shadow: 0px 2px 16px 0px #EDEDED;
    border-radius: 8px;
    .icongonggao-index{
      display: flex;
      align-items: center;
    }
    .icongonggao-index:before{
      display: block;
      content: '';
      margin-top: 4px;
      margin-right: 5px;
      width: 14px;
      height: 19px;
      background: url(./images/nb.png) no-repeat;
      background-size: contain;
    }
    .icongonggao-index:after{
      display: block;
      content: '';
      height: 15px;
      border-right: 1px solid #ccc;
      padding-right: 10px;
    }
    /deep/.van-notice-bar{
        border-radius: 5px;
    }
    /deep/.van-notice-bar__content{
        width: 100%;
    }
    /deep/.van-notice-bar__right-icon {
        color: #999999;
    }
    /deep/.van-swipe{
        width:100%;
        transform: translateZ(0);
    }
    /deep/.van-notice-bar__left-icon{
        font-size:18px;
    }
    .notice-left{
      font-size: 14px;
    //   line-height: 30px;
    //   border-right: 1px solid #ccc;
    //   padding-right: 10px;
    }
    .notice-swipe {
        height: 40px;
        line-height: 40px;
        /deep/.van-swipe-item{
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }
}
        /deep/.van-swipe-item{
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            img{
                width: 100%;
                height: 100%;
            }
        }
    .user-task {
        position: fixed;
        right: 5px;
        bottom: 150px;
        /*z-index: 999;*/
        width: 45px;
        height: 45px;
        border-radius: 50%;
        /*background: #f8bc3a;*/
        box-shadow:0 0 10px #ccc;
    }
    .new-version-box {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,.5);
        z-index: 999;
        .new-version-body {
            width: 290px;
            height: 360px;
            background: #ffffff;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            .new-version-bg {
                width: 100%;
                height: 150px;
                background: url(./images/NewVersion.png) no-repeat 0 0;
                background-size: 100%;
                .word-title-11, .word-title-12 {
                    float: right;
                    text-align: right;
                    color: #ffffff;
                    width: 136px;
                    margin-right: 15px;
                }
                .word-title-11 {
                    font-size: 24px;
                    font-weight: bold;
                    margin-top: 40px;
                }
                .word-title-12 {
                    font-size: 16px;
                    margin-top: 15px;
                }
            }
            .new-version-content {
                padding: 0 25px;
                p {
                    margin-top: 5px;
                    &.content-title {
                        margin: 15px 0 10px;
                    }
                }
            }
            .new-version-btn {
                padding: 0 15px;
                margin-top: 20px;
                div {
                    float: right;
                    height: 34px;
                    padding: 0 15px;
                    line-height: 34px;
                    text-align: center;
                    font-size: 14px;
                    color: #5186f9;
                    font-weight: bold;
                }
            }
        }
    }
    .firstLogin-tip{
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,.5);
        z-index: 990;
        .firstLogin-tip-body{
            width: 290px;
            height: 340px;
            background: #ffffff;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            .firstLogin-tip-content{
                i{
                    display: block;
                    width: 100px;
                    height: 100px;
                    background: url(../../../static/images/integral.png) no-repeat center;
                    margin: 30px auto;
                }
                div{
                    width: 100%;
                    text-align: center;
                }
            }
            .firstLogin-tip-btn{
                position: absolute;
                bottom: 0;
                width: 100%;
                height: 50px;
                background: #075ebb;
                color: #ffffff;
                div{
                    float: right;
                    height: 50px;
                    line-height: 50px;
                    padding: 0 15px;
                }
            }
        }
    }
    .text-scroll {
        width: 100%;
        height: 80px;
        padding: 0 0 0 15px;
        box-sizing: border-box;
    }
    .announcement-icon {
        float: left;
        width: 40px;
        height: 40px;
        background: #eeeeee;
        border-radius: 50%;
        margin: 20px 10px 0 0;
    }
    .announcement-icon:before {
        content: "";
        display: block;
        width: 30px;
        height: 30px;
        background: url(../../../static/images/icon-01.png) no-repeat 7px 3px;
        background-size: 16px;
        margin: 5px auto 0;
    }
    .scroll-content {
        width: calc(100% - 50px);
        height: 80px;
        float: left;
        overflow: hidden;
        transition: top 3s;
    }
    .scroll-content ul {
        display: block;
        height: 80px;
        padding: 0 15px 0 0;
    }
    .marquee_top li {
        transition: top 3s;
    }
    .scroll-content li div{
        display: table;
        height: 80px;
        float: left;
        width: calc(100% - 20px);
    }
    .scroll-content div p{
        display: table-cell;
        vertical-align: middle;
        width: 100%;
    }
    .scroll-content div p em {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }
    .module-list-01 li {
        float: left;
        width: calc((100% - 10px) / 2);
        height: 102px;
        background: #ffffff url(images/course-pic.png) no-repeat right bottom;
        background-size: 50%;
        padding: 13px 15px 15px;
        box-sizing: border-box;
    }
    .module-list-01 li:nth-last-child(1) {
        float: right;
        background: #ffffff url(images/exam-pic.png) no-repeat right bottom;
        background-size: 50%;
    }
    .module-list-01 li p {
        font-size: 16px;
    }
    .num-01, .num-02 {
        display: inline-block;
        height: 22px;
        line-height: 24px;
        padding: 0 10px;
        font-size: 16px;
        background: linear-gradient(to right, #ff7e3b, #ff9c3b);
        border: 1px solid #ff7e3b;
        -webkit-background-clip: text;
        color: transparent;
        border-radius: 10px;
        margin-top: 30px;
    }
    .num-02 {
        background: linear-gradient(to right, #1da1f2, #6d82f2);
        -webkit-background-clip: text;
        border: 1px solid #1da1f2;
    }
    .module-box-02 {
        padding: 24px 15px 24px;
    }
    .user-pic {
        width: 50px;
        height: 50px;
        float: left;
        border: 1px solid #cccccc;
        border-radius: 50%;
    }
    .line-01 {
        float: right;
        width: 1px;
        height: 18px;
        background: #e5e5e5;
        margin-top: 16px;
    }
    .box-01 {
        float: right;
        width: 88px;
        text-align: center;
    }
    .num-03 {
        font-size: 20px;
        color: #075ebb;
    }
    .box-02 {
        float: left;
        width: calc(100% - 170px);
        margin: 0 10px;
    }
    .box-02 p span {
        max-width: calc(100% - 30px);
        display: inline-block;
    }
    .module-list-02 ul li {
        padding: 11px 0 0 69px;
        margin-bottom: 15px;
    }
    .task-icon {
        float: left;
        width: 40px;
        height: 40px;
        background: #eeeeee;
        border-radius: 50%;
        margin-left: -54px;
        position: relative;
    }
    .task-icon:before {
        content: "";
        width: 26px;
        height: 26px;
        display: block;
        background: url(../../../static/images/icon-01.png) no-repeat 2px -30px;
        background-size: 19px;
        margin: 6px auto 0;
    }
    .task-icon i {
        width: 6px;
        height: 6px;
        background: #fd3b31;
        border: 2px solid #ffffff;
        border-radius: 50%;
        position: absolute;
        right: 0;
        top: 0;
    }
    .font-size17 {
        font-size: 18px;
    }
    .word-01 {
        font-size: 12px;
        color: #cccccc;
    }
    .line-02 {
        padding-bottom: 27px;
        border-bottom: 1px solid #cccccc;
    }
    .module-list-02 ul li .line-02 p {
        padding: 0 15px 0 0;
    }
    .module-list-02 ul li:nth-last-child(1) .line-02 {
        border-bottom: 0;
    }
    .module-list-02 ul li.no-data-01 {
        height: 80px;
        line-height: 65px;
        text-align: center;
        color: #999999;
        padding: 0;
        margin: 0;
    }
    .tips-box-04 {
        position: absolute;
        left: 25px;
        top: -5px;
        padding: 5px;
        width: 110px;
        background: #ffffff;
        border: 1px solid #cccccc;
        border-radius: 4px;
        z-index: 2;
    }
    .tips-sanjiao {
        position: absolute;
        left: 20px;
        top: 5px;
        width:0;
        height:0;
        border-top: 5px solid transparent;
        border-bottom: 5px solid transparent;
        border-right: 5px solid #cccccc;
    }
    .rank-box {
        .word {
            float: left;
            padding: 15px 2px
            15px 15px;
        }
        .point-icon {
            position: relative;
            float: left;
            margin: 12px 0;
        }
        .arrow-right-box {
            float: right;
            width: 20px;
            height: 20px;
            padding: 14px 15px 0 0;
        }
    }
    /deep/.van-grid-item__content--center{
      padding: 10px 6px;
    }
    /deep/.van-button{
        border: 1px solid #3382EF;
        color: #3382EF;
        height: 32px !important;
        margin-bottom: 15px;
    }
    /deep/.van-grid-item__text{
         color: #444;
    }
    .progress_sty{
        width: 40%;
        height: 4px;
        margin-top: 2%;
        background: #ebedf0;
        border-radius: 4px;
        position: relative;
        span{
            display: inline-block;
            height: 100%;
            border-radius: 4px;
            background: #075ebb;
            position: absolute;
            height: 4px;
        }
    }
</style>
